<script lang="ts" setup>
import { ref } from 'vue'
import { useTransition } from '@vueuse/core'
import { ChatLineRound, Male } from '@element-plus/icons-vue'
import { onMounted  } from 'vue';
import * as echarts from 'echarts';
// 模拟数据
import { useRouter } from 'vue-router';
const router = useRouter();


interface User {
  rank: number;
  username: string;
  questions: string;
}

const tableData: User[] = [
  { rank: 1, username: '用魔法打败魔法', questions: "提交了项目立项申请" },
  { rank: 2, username: '王多余', questions: "提交了项目立项申请" },
  { rank: 3, username: '请叫我小李', questions: "提交了项目立项申请" },
  { rank: 4, username: '方杰大战哥斯拉', questions: "提交了项目立项申请" },
  { rank: 5, username: '哥斯拉大战方杰', questions: "提交了项目立项申请" },
  { rank: 6, username: '方杰大战金刚', questions: "提交了项目立项申请" },
  { rank: 7, username: '金刚大战方杰', questions: "提交了项目立项申请" },
  { rank: 8, username: '哥斯拉大战金刚vs方杰', questions: "提交了项目立项申请" },
  { rank: 8, username: '方杰vs哥斯拉vs金刚vs方杰66', questions: "提交了项目立项申请" },
  { rank: 8, username: '用魔法打败魔法', questions: "提交了项目立项申请" },
  
];
const source = ref(0)
const outputValue = useTransition(source, {
    duration: 1500,
})
source.value = 172000

// 项目状态统计饼图
const initProjectStatusPieChart = () => {
  const answerTotalDataChartDom = document.getElementById('projecStatusStatisticPieChart');
  if (answerTotalDataChartDom) {
    const answerTotalChart = echarts.init(answerTotalDataChartDom);
    const option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '70%'],
      // adjust the start and end angle
      startAngle: 180,
      endAngle: 360,
      data: [
        { value: 1048, name: '进行中(正常)' },
        { value: 735, name: '进行中(延期)' },
        { value: 580, name: '未开始' },
        { value: 484, name: '已结束' },
        { value: 300, name: '已验收' }
      ]
    }
  ]
};

    option && answerTotalChart.setOption(option);
  }
};

onMounted(() => {
    initProjectStatusPieChart();
});

interface ProjectData {
  courseName:string;
  teacherName:string;
  teacherId:string;
  studentName:string;
  studentId:string;
  studentOrganization:string;
  status:string;

}

const search = ref('')


// 控制弹窗显示隐藏
const dialogVisible = ref(false);
// 存储当前要编辑的数据
const editedProject =  ref({} as ProjectData);

const handleEdit = (index: number, row: ProjectData) => {
  // 复制一份数据，避免直接修改原始数据
//   { ...row } 会遍历 row 对象的所有可枚举属性，并将这些属性及其对应的值复制到一个新的对象中。这样做可以避免直接修改原始数据 row
  editedProject.value = { ...row };
  dialogVisible.value = true;
  console.log(editedProject.value);
};
const handleDelete = (index: number, row: ProjectData) => {
    // 确认删除操作
    if (confirm('确定要删除这条记录吗？')) {
  }
}

// 处理保存编辑后的信息
const handleSaveEdit = () => {
  // 在这里可以将 editedProject 中的数据发送到服务器进行更新
  if (editedProject.value) {
    const index = projectTableData.value.findIndex(item => item.studentId === editedProject.value.studentId);
    console.log("index",index);
    if (index !== -1) {
     // 使用 splice 方法更新数组
     projectTableData.value.splice(index, 1, { ...editedProject.value });
    }
  }
  dialogVisible.value = false;
};

// 处理取消编辑
const handleCancelEdit = () => {
  dialogVisible.value = false;
};

const projectTableData = ref<ProjectData []> ([
  {
    courseName: '计算机网络',
    teacherName: '王老师',
    teacherId: '123456789',
    studentName: '张三',
    studentId: '1234567891',
    studentOrganization: '清华大学',
    status: '进行中(正常)'
  },
  {
    courseName: '软件工程',
    teacherName: '李老师',
    teacherId: '123456789',
    studentName: '李四',
    studentId: '12345678911',
    studentOrganization: '北京大学',
    status: '进行中(正常)'
  },
  {
    courseName: '数据库系统',
    teacherName: '张老师',
    teacherId: '123456789',
    studentName: '王五',
    studentId: '123456789111',
    studentOrganization: '浙江大学',
    status: '进行中(正常)'
  },
  {
    courseName: '操作系统',
    teacherName: '赵老师',
    teacherId: '1236789',
    studentName: '赵六',
    studentId: '1236789',
    studentOrganization: '南京大学',
    status: '进行中(正常)'
  },
  {
    courseName: '计算机组成原理',
    teacherName: '钱老师',
    teacherId: '123456789',
    studentName: '孙七',
    studentId: '12345',
    studentOrganization: '上海大学',
    status: '进行中(正常)'
  },
  {
    courseName: '计算机组成原理1',
    teacherName: '钱老师',
    teacherId: '123456789',
    studentName: '孙七',
    studentId: '1234544',
    studentOrganization: '上海大学',
    status: '进行中(正常)'
  },
])

</script>

<template>
    <div class="total">
        <el-row class="statistic-row">
            <el-col :span="6">
                <el-statistic
                    title="即将结束项目"
                    :value="268500"
                    class="statistic-item"
                />
            </el-col>
            <el-col :span="6">
                <el-statistic
                    title="我的项目"
                    :value="268500"
                    class="statistic-item"
                />
            </el-col>
            <el-col :span="6">
                <el-statistic
                    title="全部项目"
                    :value="outputValue"
                    class="statistic-item"
                />
            </el-col>
            <el-col :span="6">
                <el-statistic
                    title="现存问题项目"
                    :value="562"
                    class="statistic-item"
                >
                    <template #suffix>
                        <el-icon style="vertical-align: -0.125em">
                            <ChatLineRound />
                        </el-icon>
                    </template>
                </el-statistic>
            </el-col>
        </el-row>
        <el-row class="static-row" :gutter="20">
            <el-col :span="14" class="static-project-status" style="margin-top: 20px;">
                <el-table
                :data="tableData"
                :default-sort="{ prop: 'questions', order: 'descending' }"
                style="width: 100%"
                stripe 
                border 
                height="350" 
                :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 'bold' ,textAlign: 'center'}" 
                :cell-style="{ textAlign: 'center' }" 
              >
                <el-table-column prop="rank" label="Rank" width="80"/>
                <el-table-column prop="username" label="Name" width="200"/>
                <el-table-column prop="questions" label="Questions" sortable />
            </el-table>
            </el-col>
            <el-col :span="10" class="static-staus-statistic" style="margin-top: 20px;">
                <el-card class="project-status-card" style="height: 350px;">
                    <template #header>
                        <div class="card-header">
                            <span>项目状态统计</span>
                        </div>
                    </template>
                    <div class="update-list">
                        <div id = "projecStatusStatisticPieChart" style=" width: 100%; height: 300px;"></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4"> 
                <el-button style="margin-top:15px;">导出列表数据</el-button>
            </el-col>
        </el-row>
        <el-row class = "project-list">
                <el-table :data="projectTableData" style="width: 100%;height:350px" >
                    <el-table-column label="课程名称" prop="courseName" />
                    <el-table-column label="指导教师姓名" prop="teacherName" />
                    <el-table-column label="指导教师ID" prop="teacherId" />
                    <el-table-column label="学生姓名" prop="studentName" />
                    <el-table-column label="学生ID" prop="studentId" />
                    <el-table-column label="学生组织" prop="studentOrganization" />
                    <el-table-column align="right">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="Type to search" />
                    </template>
                    <template #default="scope">
                        <el-button size="small"  @click="handleEdit(scope.rowIndex, scope.row)" >
                        Edit
                        </el-button>
                        <el-button
                        size="small"
                        type="danger"
                         @click="handleDelete(scope.$index, scope.row)"
                        >
                        Delete
                        </el-button>
                    </template>
                    </el-table-column>
                </el-table>
        </el-row>
         <!-- 编辑弹窗 -->
         <el-dialog
          v-model="dialogVisible"
          title="编辑项目信息"
          @close="handleCancelEdit"
        >
        <el-form 
      :model="editedProject" 
      label-width="120px" 
      class="beautified-form" 
    >
      <el-form-item label="课程名称">
        <el-input 
          v-model="editedProject.courseName" 
          autocomplete="off" 
          placeholder="请输入Promotion name"
        />
      </el-form-item>
      <el-form-item label="指导教师姓名">
        <el-input 
          v-model="editedProject.teacherName" 
          placeholder="请输入指导教师姓名" 
        />
      </el-form-item>
      <el-form-item label="指导教师ID">
        <el-input 
          v-model="editedProject.teacherId" 
          placeholder="请输入指导教师ID" 
        />
      </el-form-item>
      <el-form-item label="学生姓名">
        <el-input 
          v-model="editedProject.studentName" 
          placeholder="请输入学生姓名" 
        />
      </el-form-item>
      <el-form-item label="学生组织">
        <el-input 
          v-model="editedProject.studentOrganization" 
          placeholder="请输入学生组织" 
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-input 
          v-model="editedProject.status" 
          placeholder="请输入状态" 
        />
      </el-form-item>
    </el-form>
          <template #footer>
            <el-button @click="handleCancelEdit">取消</el-button>
            <el-button type="primary" @click="handleSaveEdit">保存</el-button>
          </template>
        </el-dialog>
    </div>
</template>



<style scoped>
.total {
    padding: 0px;
}

.header-row {
    align-items: center;
    margin-bottom: 20px;
}

.search-input {
    width: 100%;
    margin-top: 10px;
}

.statistic-row {
    justify-content: space-around;
    margin-top: 20px;
    text-align: center;
}

.statistic-item {
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.project-status-card {
    border-radius: 8px; /* 增加卡片圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 增加卡片阴影 */
}

.card-header {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    padding: 16px;
    border-bottom: 1px solid #eee;
}

.update-item {
    display: flex;
    align-items: center;
    padding: 5px 0; /* 增加列表项内边距 */
    border-bottom: 1px solid #f0f0f0;
}

.update-item:last-child {
    border-bottom: none;
}

.update-time {
    min-width: 120px; /* 增加时间列宽度 */
    color: #888;
    font-size: 14px;
}

.update-content {
    font-size: 14px; /* 增加内容字体大小 */
    color: #333;
}
</style>